<!DOCTYPE html>
<html ng-app="oppia">
  <head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Oppia - {% block subtitle %}{% endblock %}</title>

    {% block header_css %}
      {% include 'header_css_libs.html' %}
    {% endblock header_css %}

    {% block header_js %}
      {% include 'header_js_libs.html' %}
    {% endblock header_js %}

    <!-- See http://docs.mathjax.org/en/latest/start.html#mathjax-cdn -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        /* Hide the 'loading' and 'processing' messages. */
        messageStyle: 'none',
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
      });
    </script>
    <script type="text/javascript"
            src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

  </head>

  <body ng-controller="Base">
    <div id="wrapper">
      <div class="oppia-main-body">
        {% if not iframed %}
          <!-- nav bar -->
          <div class="navbar navbar-static-top">
            <div class="navbar-inner">
              <div class="container oppia-content">
                <a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </a>

                <a class="brand" href="/">Oppia</a>

                <div class="nav-collapse collapse">

                  <ul class="nav">
                    <li {% if nav_mode == 'gallery' %} class="active" {% endif %}>
                      <a href="/gallery">Gallery</a>
                    </li>
                    {% if nav_mode == 'reader' %}
                      <li class="active">
                        <a href="">Learn</a>
                      </li>
                    {% else %}
                      {% if user %}
                        <li {% if nav_mode == 'profile' or nav_mode == 'editor' %} class="active" {% endif %}>
                          <a href="/profile">My Explorations</a>
                        </li>
                      {% endif %}
                    {% endif %}
                  </ul>

                  <ul class="nav pull-right">
                    {% if nav_mode != 'feedback' %}
                      <li>
                        <a href="" ng-click="openFeedbackPage()">
                          Give Feedback
                        </a>
                      </li>
                    {% else %}
                      <li class="active">
                        <a href="">Give Feedback</a>
                      </li>
                    {% endif %}
                    {% if user %}
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          {{user}}
                          {% if is_admin %} (Admin) {% endif %}
                          <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="{{logout_url}}">Logout</a>
                          </li>
                        </ul>
                      </li>
                    {% else %}
                      <li>
                        <a href="{{login_url}}">Login</a>
                      </li>
                    {% endif %}
                  </ul>
                </div>

              </div>
            </div>
          </div>
        {% endif %}
  
        <div ng-cloak>
          <div class="oppia-alert-blocks">
            <div ng-repeat="warning in (warningsData.warnings | limitTo:5)">
              <p class="alert alert-block">
                <button type="button" class="close" ng-click="warningsData.deleteWarning($index)">&times;</button>
                <strong>Warning!</strong>
                <[warning]>
              </p>
            </div>
          </div>
          {% block content %}{% endblock %}
        </div>
        <br><br>
      </div>
  
      {% if not iframed %}
        <div class="navbar oppia-footer">
          <div class="oppia-content">
            <ul class="nav">
              <li>
               <a href="/about">About Oppia</a>
              </li>
              <li>
                <a href="/terms">Terms</a>
              </li>
            </ul>
          </div>
        </div>
      {% endif %}
    </div>

    {% include 'footer_js_libs.html' %}

    <script>
      {{ include_js_file('assets/js/app.js') }}
      {{ include_js_file('assets/js/directives.js') }}
      {{ include_js_file('assets/js/filters.js') }}
      {{ include_js_file('assets/js/services/activeInputData.js') }}
      {{ include_js_file('assets/js/services/warningsData.js') }}
      {{ include_js_file('components/directives.js') }}
      {{ include_js_file('base.js') }}
    </script>

    {% block footer_js %}
    {% endblock footer_js %}

  </body>
</html>
